<template>
    <div class="qrLogin">
        <h1>微信扫码登录</h1>
        <div class="bg" v-loading='false'>
           <img :src="qrImg" alt="" class="img1" >
        </div>

        <div class="cover" v-show="showCover"  >
            
        </div>

      
        <img :src='coverPic' alt=""  class="img2" v-if="showCoverPic" @click="updataQr" v-loading='loading'>  

         <svg class="icon qrcode" aria-hidden="true" @click='normalJump'>
                <use xlink:href="#icon-diannaojiaobiao" width='60px' height='60px' color='white'></use>
         </svg>
        

        <h4>请使用手机微信扫码登入</h4>
    </div>
</template>


<script>

// 引入socket.io     这个插件是有关websocket的
    import socketIo from 'socket.io-client'

// 引入qrcode
    import qrcode from 'qrcode'

// 引入users中的api
    import * as api from '@/api/users'

// 引入storage(存储方法)
    import storage from '@/api/storage'

// 引入成功和失败的图片
    import invalidImg from '@/assets/img/invalidQr.png'
    import scanSuccessImg from "@/assets/img/scancode.png"
import { Loading } from 'element-ui'

export default ({

    data(){
        return {
            // 二维码图片
            qrImg:"",
            // 遮罩显示
            showCover:false,
            //遮罩图片
            coverPic:'',
            // 遮罩图片是否显示
            showCoverPic:false,

            // 加载动画显示与否
            Loading:false
        }
    },






    methods: {
        normalJump(){
            this.$emit('watchChange','normalLogin')
        },



          // 请求获取二维码地址
        async getQrUrl(sid){
            let res = await api.getQrCode(sid.sid)
            

            let {scanCodeUrl:qrcodeUrl} = res.data

            
            // 得到二维码地址
            console.log(qrcodeUrl);
            // 通过qrcode插件，生成二维码
            qrcode.toDataURL(qrcodeUrl,(err,img) => {
                if(err){
                    throw err
                }
                
                // console.log(img);
                this.qrImg = img
                
            })  


            this.showCover = false
            this.showCoverPic = false

        
        },




    // 封装一个方法，用于存储用户的信息和token
        storageUserInfo({userInfo, token, permission}){
             // 将用户信息存储到vuex中
            this.$store.commit('users/SET_USERINFO', userInfo)
            storage.set('userInfo',userInfo)
            storage.set('qf-token',token)
            storage.set('permission',permission)
        },


        // 封装一个方法，用于在二维码失效时点击重新获取
        updataQr(){
            // 获取本地存储的sid
            let sid = storage.get('qf-sid')
            this.getQrUrl(sid)
        }
    },

    mounted () {
        // 当组件挂载时，加载动画出现
        this.Loading = true

       

        // 当二维码组件挂载时，建立socket连接
        // 创建socketIo实例对象
        let io = socketIo('wss://chst.vip')

        // 监听连接成功的事件  sid是唯一标识
        io.on('connectSuccess',sid => {
            // 将sid存到本地
            storage.set('qf-sid',sid)
           
            this.getQrUrl(sid)
        })

        // 监听失效二维码
        io.on('invalidCode',data => {
            console.log(data);
            // 展示遮罩
            this.showCover = true

            // 显示无效的二维码遮罩样式
           this.showCoverPic = true
           this.coverPic = invalidImg
          
            
        })


        // 扫码成功
        io.on('scancodeSuccess',async({state, wechatCode, msg}) => {
            console.log(state, wechatCode, msg);
            // 扫码成功显示遮罩
            this.showCover = true
            // 显示成功的图片
            this.showCoverPic = true
            this.coverPic = scanSuccessImg
            if(state){
                // 调用微信登入的接口
                let res = await api.wechatLogin(wechatCode)
                // 将内容存到本地
                this.storageUserInfo(res.data)
               this.$message({
                                message: '登陆成功',
                                type: 'success'
                             });
                // 跳转页面
                this.$router.push('/')
            } else{
                console.error(msg);
            }
        })
    },


   
        
 
})
</script>








<style scoped lang='less'>
        .qrcode{
            position: absolute;
            top: 10px;
            right: 10px;
            color: white;
            width: 60px;
            height: 60px;
        }

        .icon1{
            font-size: 150px;
        }

        .bg{
            background: white;
        }
        h1{
            color: white;
        }

        h4{
           color: pink;
        }

        .img1{
            width: 150px;
            height: 150px;
        }
        .img2{
            width: 100px;
            height: 100px;
            position: absolute;
            top:160px;
        }

        .cover{
            background: rgba(255, 255, 255,.5);
            width: 150px;
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 138px;
        }

        .qrLogin{
            width: 350px;
            height: 400px;
            position: absolute;
            right: 40px;
            top:50px;
            background: url(../../assets/img/pic1.webp);
            background-size: 350px 380px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            border-radius: 30px;
        } 

</style>